<template>
    <orh-trees>
        <Tree :data="trees" slot="trees" @on-select-change="clicktreemenu"></Tree>
		<current-term @on-formstate="formState" style="width:200px" slot="option"></current-term>
		<Button type="primary" slot="option" style="margin-left: 10px;" :loading="butloading" @click="exportAll" v-button="'dutiesleave_export'" size="small">导出职务统计</Button>
        <Button type="primary" slot="option" style="margin-left: 10px;" @click="exportSameDay" v-button="'dutiesleavesame_export'" size="small">选择导出数据</Button>
        <Modal v-model="lookupState" slot="others">
			<p slot="header"><span>请选择时间段</span></p>
			<div style="text-align:center">
				<DatePicker type="daterange" v-if="lookupState" @on-change="seltime" placeholder="选择时间段" style="width: 200px"></DatePicker>
			</div>
			<div slot="footer">
				<Button type="primary" :loading="timeloading" @click="lookupSubmit">确定</Button>
				<Button @click="lookupState=false">取消</Button>
			</div>
		</Modal>
		<orh-sub-table slot="content" style="height: 100%;">
		  	<div slot="table">
				<Card>
					<Row>
						<i-col span="4"><h4>总概率：{{percents}}</h4></i-col>
						<i-col span="20"><h4>请假总人数：{{total}}人</h4></i-col>
					</Row>
				</Card>
				<div>
					<echarts :option="option" v-if="HonorList.length!=0" style="width100%;height:420px;"></echarts>
					<Spin size="large" fix v-if="spinShowHel"></Spin>
				</div>
				<Table :columns="columns1" :data="HonorList" :loading="spinShowHel"></Table>
				<Modal v-model="modal2" width="900">
					<p slot="header" style="color:#f60;text-align:center"><span>{{title}}</span></p>
					<div style="text-align:center"><Table :columns="columnsxq" :loading="tableloadxq" :data="GradeListxq"></Table></div>
					<div slot="footer"><Button type="primary" long @click="del">关闭</Button></div>
				</Modal>
		  	</div>
        </orh-sub-table>
    </orh-trees>
</template>
<script>
export default {
	name: 'leave-jobstatistics',
	layout:"menu",
	components: {
		CurrentTerm: resolve=> require(['&/Authpub/CurrentTerm.vue'],resolve)
	},
  data() {
    return {
		start_time:'',
		end_time:'',
		timeloading:false,
		lookupState:false,
		butloading:false,
		allid:null,
		modal2: false,
		tableloadxq:false,
		GradeListxq:[],
		title:null,
		columnsxq:[
			{
			    title: '序号',
			    type: 'index',
			    width: 60,
			    align: 'center'
			},
			{
			    title: '请假种类',
			    align: 'center',
			    width:90,
			    render: (h, params) => {
			        return h('div', params.row.teacher_leave_kinds.length!= 0?params.row.teacher_leave_kinds[0].dictionary_name.zh:'');
			    }
			},
			{
			    title: '请假开始时间',
			    align: 'center',
			    key:'start_time',
			    width:170,
			},
			{
			    title: '请假结束时间',
			    align: 'center',
			    key:'end_time',
			    width:170,
			},
			{
			    title: '请假天数',
			    align: 'center',
			    key:'leave_days',
			    width:90,
			},
			{
			    title: '是否调课',
			    align: 'center',
			    width:90,
			    render: (h, params) => {
					return h('div', [
			            h('div',params.row.whether_class == '1' ?'是':'否')
			        ]);
			    }
			},
			{
			    title: '请假原因',
			    align: 'center',
			    key:'teacher_leave_reason',
			},
        ],
		option: {
			color: ['#1c2438', '#495060'],
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {
				data: ['请假数量', '请假天数',]
			},
			toolbox: {
				show: true,
				orient: 'vertical',
				left: 'right',
				top: 'center',
				feature: {
					mark: {show: true},
					dataView: {show: true, readOnly: false},
					magicType: {show: true, type: ['line', 'bar', ]},
					restore: {show: true},
					saveAsImage: {show: true}
				}
			},
			xAxis: [
				{
					type: 'category',
					show: false,
					axisTick: {show: false},
					data: []
				}
			],
			yAxis: [
				{
					type: 'value'
				}
			],
			series: [
				{
					name: '请假数量',
					type: 'bar',
					barGap: 0,
					data: []
				},
				{
					name: '请假天数',
					type: 'bar',
					barGap: 0,
					data: []
				},
			]
		},
		percents:null,
		total:null,
      	show: false,
      	trees: [],
		treesHead: {
			title: "职务列表",
			button: false,
			button_text: "添加按钮"
		},
		show2: true,
		HonorList:[],
		spinShowHel:false,//数据
		url:'api/leave/v1/leave_statistics/teacher_leave_statistics?duite_id=',
		duiteId:null,
		columns1: [
			{
				title: '序号',
				type: 'index',
				width: 60,
				align: 'center'
			},
			{
				title: '教师姓名',
				render:(h,params)=> {
                        return h('span',params.row.teacher_name?params.row.teacher_name.zh?params.row.teacher_name.zh:params.row.teacher_name.mn:'')
                    },
			},
			{
				title: '请假数量',
				key: 'leave_count',
				sortable: true,
				sortType:'desc'
			},
			{
				title: '请假种类',
				render: (h, parmes) => {
					if(parmes.row.leave_kind.length!=0){
						let arr = parmes.row.leave_kind
						let name = ''
						arr.forEach((item,num) => {
							if (num != 0) {
								name +=`,${item.dictionary_name.zh}(${item.count}次,共计${item.days}天)`
							}else{
								name +=`${item.dictionary_name.zh}(${item.count}次,共计${item.days}天)`
							}
						})
						return h('div', name)
					}else{
						return h('div', '暂无数据')
					}
				}
			},
			{
				title: '请假天数',
				key: 'leave_day',
				sortable: true,
				sortType:'desc'
			},
			{
				title: '扣分数',
				key: 'points',
			},
			{
				title: ' ',
				render: (h, params) => {
				    return h('div', [
				        h('Button', {
				            props: {
				                type: 'primary',
				                size: 'small',
				            },
				            style: {
				                marginRight: '5px',
				            },
				            on: {
				                click: () => {
				                    this.look(params.row)
				                }
				            }
				        }, '查看'),
				    ]);
				}
            },
		],
		};
  	},
  	methods: {
		/************************************************************
		* 选择学期
		************************************************************/
        formState(val){
            if(val!=null){
				this.allid = val
				this.url = `api/leave/v1/leave_statistics/teacher_leave_statistics?semester_id=${val}&duite_id=`
				this.queryData(this.duiteId)
            }
		},
		/************************************************************
		* 获取职务
		************************************************************/
		getAllDepart() {
			this.$http.get('api/user/v1/get/duties/list').then(res=> {
				this.trees = this.process(res.data)
				this.clicktreemenu(this.trees)
			}).catch(err => {
				if (err.code && err.code == 422) {
					this.$Message.error(err.message);
				}
			})
    	},
		/************************************************************
		* 处理数据
		************************************************************/
		process(data) {
			let arr = []
			data.forEach(item => {
				item.title = item.duties_name.zh?item.duties_name.zh:item.duties_name.mn;
				item.id = item.id;
				arr.push(item)
			});
			return arr
		},
		/************************************************************
		* 点击部门
		************************************************************/
		clicktreemenu(val) {
			this.duiteId = val[0].id
			this.queryData(val[0].id)
		},
		/************************************************************
		* 查看
		************************************************************/
		look(row){
			this.title=row.teacher_name.zh?row.teacher_name.zh:row.teacher_name.mn
			this.modal2 = true;
			this.tableloadxq=true
			this.$http.get(`api/leave/v1/leave_statistics/user_details/${row.user_id}?semester_id=${this.allid}`).then((response) => {
				this.tableloadxq=false
				this.GradeListxq=response.data
			});
		},
		/************************************************************
		* 关闭查看
		************************************************************/
		del () {
			setTimeout(() => {
				this.modal2 = false;
			}, 500);
		},
		/************************************************************
		* 获取职务统计
		************************************************************/
		queryData(id){
			if(id!=null){
			this.spinShowHel=true
			this.$http.get(this.url+id).then(val=>{
				let sum=0;
				let xAxis=[]
				let yAxis1=[]
				let yAxis2=[]
				if(val.data.length!=0){
					this.HonorList=val.data
					this.HonorList.forEach(function(item,index){
						sum +=item.Percentage
						xAxis.push(item.teacher_name.zh)
						yAxis1.push(item.leave_count)
						yAxis2.push(item.leave_day)
					})
					let {length} = this.HonorList.filter(item => item.leave_count!=0)
					this.total = length
					let s = sum.toFixed(2)
					this.percents=`${s}%`
				}else{
					this.HonorList=[]
					this.total = 0
					this.percents='0%'
				}
				this.option.xAxis[0].data=xAxis
				this.option.series[0].data=yAxis1
				this.option.series[1].data=yAxis2
				this.spinShowHel=false
			}).catch(err => {
				if (err.code && err.code == 422) {
					this.$Message.error(err.message);
				}
				this.spinShowHel = false
			})
		}
	},
	/************************************************************
	* 时间处理
	************************************************************/
	seltime(val){
		this.start_time = val[0]
		this.end_time = val[1]
	},
	/************************************************************
	* 选择时间段导出数据
	************************************************************/
	lookupSubmit(){
		this.lookupState = false
		this.publicexport()
	},
	/************************************************************
	* 导出
	************************************************************/
	exportAll(){
		if(this.allid!=null){
			if(this.duiteId!=null){
				this.butloading=true
				this.$http.post(`api/leave/v1/leave_statistics/leave_duty_out?semester_id=${this.allid}&duty_id=${this.duiteId}`).then(val => {
					this.butloading=false
					window.open(val.data.url)
				}).catch(err => {
					console.log(err)
				})
			}else{
				this.$Message.info('请选择职务！');
			}
		}else{
			this.$Message.info('请选择学期！');
		}
	},
	/************************************************************
	* 选择导出数据
	************************************************************/
	exportSameDay(){
		if(this.allid!=null){
			if(this.duiteId!=null){
				this.lookupState = true
				this.publicexport()
			}else{
				this.$Message.info('请选择职务');
			}
		}else{
			this.$Message.info('请选择学期');
		}
	},
	/************************************************************
	* 选择导出数据的公共方法
	************************************************************/
	publicexport(){
		if(this.start_time!='' && this.end_time!=''){
			this.timeloading = true
			this.$http.post(`api/leave/v1/leave_statistics/leave_duty_out?semester_id=${this.allid}&duty_id=${this.duiteId}&start_time=${this.start_time}&end_time=${this.end_time}`).then(val => {
				window.open(val.data.url)
				this.start_time=''
				this.end_time=''
				this.timeloading = false
			}).catch(err => {
				this.timeloading = false
			})
		}
	}
},
	created() {
		this.getAllDepart()
	},
}
</script>
